<!doctype html>
<html>
  <head>
    <title>Contrast Incomplete test</title>
    <meta charset="utf8" />
    <link
      rel="stylesheet"
      type="text/css"
      href="/node_modules/mocha/mocha.css"
    />
    <script src="/node_modules/mocha/mocha.js"></script>
    <script src="/node_modules/chai/chai.js"></script>
    <script src="/axe.js"></script>
    <script>
      mocha.setup({
        timeout: 10000,
        ui: 'bdd'
      });
      var assert = chai.assert;
    </script>
  </head>
  <body>
    <div id="fixture" style="width: 100%; position: relative">
      <div
        id="parent"
        style="
          height: 50px;
          width: 50px;
          background-color: white;
          position: relative;
          z-index: 5;
        "
      >
        <div
          id="shifted"
          style="
            position: absolute;
            top: -10px;
            height: 50px;
            width: 50px;
            z-index: 15;
          "
        >
          <img src="some-img.png" width="50" height="50" />
        </div>
        <div
          id="target"
          style="
            position: relative;
            top: 1px;
            height: 20px;
            width: 50px;
            z-index: 25;
            background: rgba(0, 125, 0, 0.5);
          "
        >
          Text
        </div>
      </div>
      <div style="background-image: linear-gradient(red, orange); color: #fff">
        Text over gradient
      </div>

      <style type="text/css">
        #pseudoOnButton::before {
          background-color: #000;
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: -1;
        }
      </style>
      <button
        id="pseudoOnButton"
        style="
          position: relative;
          background-color: transparent;
          color: #ffffaa;
        "
      >
        Button with ::before
      </button>
    </div>

    <div id="mocha"></div>
    <script src="/test/integration/no-ui-reporter.js"></script>
    <script src="/test/testutils.js"></script>
    <script src="color-contrast.js"></script>
    <script src="/test/integration/adapter.js"></script>
  </body>
</html>
